import React from 'react';
import { Typography, Space, Alert } from 'antd';

/**
 * 区域
 */
function Area(props) {
    const { style, required, title, info, children } = props;

    const renderRequiredMark = () => {
        return <span style={{ color: '#f5222d' }}>*</span>;
    };

    const renderInfo = () => {
        return <Alert showIcon type="info" message={info} />;
    };

    const renderTitle = () => {
        return (
            <Typography.Title level={5}>
                <Space size={4}>
                    {required && renderRequiredMark()}
                    <span>{title}</span>
                    {info && renderInfo()}
                </Space>
            </Typography.Title>
        );
    };

    return (
        <div className="back-white padding-10 m-b-10" style={style}>
            {title && renderTitle()}
            {children}
        </div>
    );
}

export default Area;
